<template>
  <div class="loginSuccess">
      <div class="top">
          <div class="title">
                <span class="iconfont icon-fanhui" @click="goBack"></span>
                <span class="text">我的</span>
                <span class="iconfont icon-caidan"></span>
          </div>
          <div class="img">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601223325142&di=609e1fdcbabd1ee104aa412e9d1f2432&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171114%2F0fc43e9ad58f4a5cb41a018925b0e475.jpeg" alt="">
          </div>
          
      </div>
      <div class="content">
          <div class="title">我的订单</div>
          <div class="info">
              <div class="item">
                  <div class="iconfont icon-dianying1 dianying"></div>
                  <div>电影</div>
              </div>
              <div class="item">
                  <div class="iconfont icon-shangcheng2 shangcheng"></div>
                  <div>商城</div>
              </div>
          </div>
      </div>
      <li>优惠券</li>
      <li>折扣卡</li>
  </div>
</template>

<script>
export default {
    methods:{
        goBack(){
            this.$router.back();
        }
    }
}
</script>

<style scoped lang="scss">
.loginSuccess{
    position:absolute;
    top:0;
    left:0;
    width:100%;
}
.top{
    width:100%;
    height:200px;
    box-sizing: border-box;
    background-color: #df2d2d;
    color:#fff;
    border-bottom:10px solid #f8f8f8;
    .title{
        height:50px;
        box-sizing: border-box;
        border-bottom:1px solid #ddd;
        display:flex;
        align-items: center;
        font-size: 18px;
        .text{
            width:300px;
            text-align:center;
        }
        .iconfont{
            flex:1;
            text-align:center;
            font-size:24px;
        }
    }
    .img{
        height:150px;
        display:flex;
        justify-content: center;
        align-items: center;
       
        img{
            width: 50px;
            height: 50px;
             border-radius: 50%;
        }
        
    }
}
.content{
    border-bottom:10px solid #f8f8f8;
    .title{
        line-height:40px;
        font-size:14px;
        color:#333;
        text-align:center;
    }
    .info{
        height:120px;
        display:flex;
        align-items: center;
        .item{
            flex:1;
            display:flex;
            flex-direction:column;
            align-items: center;
            font-size:14px;
            color:#666;
            .iconfont{
                width:50px;
                height:50px;
                margin-bottom:10px;
                font-size:30px;
                // border:1px solid #000;
                color:#fff;
                text-align: center;
                line-height:50px;
                border-radius:50%;
                &.dianying{
                    background-color: #df2d2d;
                }
                &.shangcheng{
                    background-color: #26D19C;
                }
            }
            
        }
    }
}
li{
    line-height:50px;
    font-size:14px;
    color:#333;
    margin-left:10px;
}
</style>